<template>
	<view class="shop-item" >
		<view class="shop-img">
			<up-lazy-load  border-radius="10" :image="shop.image"></up-lazy-load>
		</view>
		<view class="shop-info">
			<view class="shop-name">
				{{shop.title}}
			</view>
			<view class="shop-price">
				<text class="colorError">
					<text style="font-size: 20rpx;">￥</text>
					<text class="fontWeight">{{shop.price}}</text>
				</text> 
				<text style="margin-left: 10rpx;font-size: 20rpx;">已售777+</text>
			</view>
		</view>
	</view>
</template>

<script   setup>
	import {defineProps} from "vue";
  defineProps(['shop']);
</script>

<style lang="scss" scoped>
	.shop-item{
		background-color: white;
		border-radius: 10rpx;
		min-height: 300rpx;
		margin: 20rpx 10rpx;
		font-size: 26rpx;
		.shop-info{
			padding: 14rpx;
			.shop-name{
				width: 100%;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.shop-price{
				margin-top: 10rpx;
			}
		}
	}
</style>